import React, { useEffect, useRef, useCallback } from "react";
import * as echarts from "echarts";
const pieData = [
  {
    name: "echart模块",
    value: "1100",
    itemStyle: {
      color: "pink",
    },
  },
  {
    name: "Hooks模块",
    value: "2800",
  },
  {
    name: "父子通信",
    value: "4500",
  },
  {
    name: "路由学习",
    value: "2202",
  },
  {
    name: "moment模块",
    value: "2421",
  },
  {
    name: "mokejs模块",
    value: "12800",
  },
  {
    name: "父子通信",
    value: "4500",
  },
  {
    name: "路由学习",
    value: "2202",
  },
  {
    name: "moment模块",
    value: "2421",
  },
  {
    name: "mokejs模块",
    value: "800",
  },
];
export default function FirstEchart() {
  const firstEchart = useRef(null);

  const setOption = useCallback(() => {
    const myEchart = echarts.init(firstEchart.current);
    const option = {
      backgroundColor: "#031f2d",
      tooltip: {
        show: true,
        trigger: "item",
        formatter: (params) => {
          return params.marker + params.name + "  " + params.value;
        },
      },
      // legend: {
      //   // show: true,
      //   orient: "horizontal",
      // },
      series: [
        {
          name: "",
          type: "pie",
          radius: ["30%", "40%"],
          center: ["50%", "50%"],
          data: pieData,

          labelLine: {
            show: false,
            emphasis: {
              show: false,
            },
          },
          label: {
            show: true,
            fontSize: 16,
            opacity: 1,
            //  position: "left",
            backgroundColor: new echarts.graphic.LinearGradient(
              0,
              0,
              1,
              0,
              [
                {
                  offset: 0,
                  color: "rgba(0, 114, 255, 0.21)",
                },
                {
                  offset: 0.27,
                  color: "rgba(23, 127, 255, 0.7)",
                },
                {
                  offset: 0.49,
                  color: "rgba(0, 114, 255, 0.53)",
                },
                {
                  offset: 1,
                  color: "rgba(16, 123, 255, 0)",
                },
              ],
              false
            ),
            formatter: function (params) {
              return `{name|${params.name}} {value|${params.value}}`;
            },
            rich: {
              name: {
                fontSize: 12,
                color: "#fff",
                padding: [0, 5],
              },
              value: {
                fontSize: 12,
                color: "#1CFAF2",
                fontWeight: "bold",
              },
            },
          },
        },
      ],
    };
    myEchart.setOption(option);
  }, []);
  useEffect(() => {
    setOption();
  }, [setOption]);

  return (
    <div
      ref={firstEchart}
      style={{ width: "380px", height: "250px", background: "black" }}
    ></div>
  );
}
